<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	template="/templates/menu-template.xhtml">
	<ui:define name="title">
		<h:outputText value="#{msg.catalogoVinculaciones}" />
	</ui:define>
	<ui:define name="content">
		<a4j:form id="form" width="100%">
			<rich:panel width="100%">
				<f:facet name="header">
					<h:outputText value="#{msg.info}" />
				</f:facet>
				<h:panelGrid columns="1">
					<h:panelGroup>
						<h:outputText value="#{msg.datosGenerales}"
							style="font-weight:bold; font-size:15px;" />
					</h:panelGroup>
					<rich:separator />
					<h:panelGrid columns="2" width="100%">
						<a4j:keepAlive beanName="beanCompany" />
						<h:panelGrid columns="2" columnClasses="col1,col2" width="100%">
							<h:outputText value="#{msg.tradename} :"
								style="font-weight:bold;" />
							<h:outputText value=" #{beanCompany.viewTradename}" />
							<h:outputText value="#{msg.commercialBusiness} :"
								style="font-weight:bold" />
							<h:outputText value="#{beanCompany.viewCorporateSpin}" />
							<h:outputText value="#{msg.infonavit} :" style="font-weight:bold" />
							<h:outputText value="#{beanCompany.viewInfonavit}" />
							<h:outputText value="#{msg.stps} :" style="font-weight:bold" />
							<h:outputText value="#{beanCompany.viewStps}" />
						</h:panelGrid>
						<h:panelGrid columns="2" columnClasses="col1,col2" width="100%">
							<h:outputText value="#{msg.socialReason} :"
								style="font-weight:bold" />
							<h:outputText value="#{beanCompany.viewSocialReason}" />
							<h:outputText value="#{msg.rfc} :" style="font-weight:bold" />
							<h:outputText value="#{beanCompany.viewRfc}" />
							<h:outputText value="#{msg.legalRepresentative} :"
								style="font-weight:bold" />
							<h:outputText value="#{beanCompany.viewLegalRepresentative}" />
							<h:outputText value="#{msg.stpsRepresentative} :"
								style="font-weight:bold" />
							<h:outputText value="#{beanCompany.viewStpsRepresentative}" />
						</h:panelGrid>
					</h:panelGrid>
					<h:panelGrid columns="1">
						<h:panelGroup>
							<h:outputText value="#{msg.domicilio}"
								style="font-weight:bold; font-size:15px;" />
						</h:panelGroup>
						<rich:separator />
						<h:panelGrid columns="6"
							columnClasses="col3,col4,col3,col4,col3,col4" width="100%">
							<h:outputText value="#{msg.city} :" style="font-weight:bold" />
							<h:outputText value="#{beanCompany.viewCountry}" />
							<h:outputText value="#{msg.state} :" style="font-weight:bold" />
							<h:outputText value="#{beanCompany.viewState}" />
							<h:outputText value="#{msg.suburb} :" style="font-weight:bold" />
							<h:outputText value="#{beanCompany.viewSuburb}" />
							<h:outputText value="#{msg.street} :" style="font-weight:bold" />
							<h:outputText value="#{beanCompany.viewStreet}" />
							<h:outputText value="#{msg.numberInEx} :"
								style="font-weight:bold" />
							<h:outputText value="#{beanCompany.viewNumberInEx}" />
							<h:outputText value="#{msg.zipCode}" style="font-weight:bold" />
							<h:outputText value="#{beanCompany.viewZipCode }" />
						</h:panelGrid>
						<h:panelGroup>
							<h:outputText value="#{msg.contacto}"
								style="font-weight:bold; font-size:15px;" />
						</h:panelGroup>
						<rich:separator />
						<h:panelGrid columns="6"
							columnClasses="col3,col4,col3,col4,col3,col4" width="100%">
							<h:outputText value="#{msg.telephone} #1 :"
								style="font-weight:bold; text-align:right;" />
							<h:outputText value="#{beanCompany.viewTelephone1}" />
							<h:outputText value="#{msg.telephone} #2 : "
								style="font-weight:bold; text-align:right;" />
							<h:outputText value="#{beanCompany.viewTelephone2} " />
							<h:outputText value="#{msg.fax} :" style="font-weight:bold" />
							<h:outputText value="#{beanCompany.viewFax}" />
							<h:outputText value="#{msg.email} :" style="font-weight:bold" />
							<h:outputText value="#{beanCompany.viewEmail}" />
							<h:outputText value="#{msg.web} :" style="font-weight:bold" />
							<h:outputText value="#{beanCompany.viewWeb}" />
							<h:outputText value="#{msg.active} :" style="font-weight:bold" />
							<h:outputText value="#{beanCompany.viewIsActive}" />
						</h:panelGrid>
					</h:panelGrid>
				</h:panelGrid>
			</rich:panel>
			<rich:spacer width="1" height="10" />
			<rich:panel>
				<f:facet name="header">
					<h:outputText value="#{msg.dispositivosVinculados}" />
				</f:facet>
				<h:panelGrid columns="1">
					<a4j:commandButton value="#{msg.nuevaVinculacion}" id="linkReader"
						action="#{beanLink.selectBrand}">
						<rich:componentControl for="mpLinkReader" attachTo="linkReader"
							operation="show" event="onclick" />
					</a4j:commandButton>
				</h:panelGrid>
				<rich:spacer height="20px" />
				<rich:extendedDataTable value="#{beanLink.listItems}" var="item"
					id="table" rows="10" reRender="datascroller"
					style="margin-left: auto; margin-right: auto; text-align: center;"
					width="100%">
					<rich:column id="serialNumberColumn" label="#{msg.serialNumber}"
						width="26%">
						<f:facet name="header">
							<h:outputText value="#{msg.serialNumber}" />
						</f:facet>
						<h:outputText value="#{item.serialNumber}" />
					</rich:column>
					<rich:column id="userColumn" label="#{msg.user}" width="25%">
						<f:facet name="header">
							<h:outputText value="#{msg.user}" />
						</f:facet>
						<h:outputText value="#{item.user}" />
					</rich:column>
					<rich:column id="companyColumn" label="#{msg.tradename}"
						width="26%">
						<f:facet name="header">
							<h:outputText value="#{msg.tradename}" />
						</f:facet>
						<h:outputText value="#{item.tradename}" />
					</rich:column>
					<rich:column width="25%" id="acciones" label="#{msg.acciones}">
						<f:facet name="header">
							<h:outputText value="#{msg.acciones}" />
						</f:facet>
						<a4j:commandLink ajaxSingle="true" id="deleteItem">
							<h:graphicImage value="/static/images/delete.png"
								style="border: 0" />
							<f:setPropertyActionListener value="#{item}"
								target="#{beanLink.currentItem}" />
							<rich:componentControl for="mpDeleteItem" attachTo="deleteItem"
								operation="show" event="onclick" />
						</a4j:commandLink>
					</rich:column>
					<f:facet name="footer">
						<rich:datascroller id="datascroller" renderIfSinglePage="false" />
					</f:facet>
				</rich:extendedDataTable>
			</rich:panel>
		</a4j:form>
		<!-- Inicio Modal Panel Agregar -->
		<rich:modalPanel id="mpLinkReader" height="530" width="500">
			<f:facet name="header">
				<h:outputText value="#{msg.vincular}" />
			</f:facet>
			<f:facet name="controls">
				<h:panelGroup>
					<h:graphicImage value="/static/images/close.png"
						id="hideLinkModalPanel" />
					<rich:componentControl for="mpLinkReader"
						attachTo="hideLinkModalPanel" operation="hide" event="onclick" />
				</h:panelGroup>
			</f:facet>
			<h:panelGrid height="400" width="400"
				style="margin-left: auto; margin-right: auto; text-align: center;">
				<a4j:keepAlive beanName="beanLink" />
				<a4j:form>
					<a4j:outputPanel ajaxRendered="true">
						<a4j:include id="wizard" viewId="/wizard/selectSerialNumber.xhtml" />
					</a4j:outputPanel>
				</a4j:form>
			</h:panelGrid>
		</rich:modalPanel>
		<!-- Fin Modal Panel Agregar -->
		<!-- Inicio Modal Panel Borrar -->
		<rich:modalPanel id="mpDeleteItem" height="110" width="250">
			<f:facet name="header">
				<h:panelGroup>
					<h:outputText value="#{msg.borrar}"></h:outputText>
				</h:panelGroup>
			</f:facet>
			<a4j:form>
				<p>El regitro será eliminado permanentemente del sistema.</p>
				<h:panelGrid columns="2" style="margin-left: auto;">
					<h:panelGroup>
						<h:commandButton value="#{msg.continuar}" id="continueDeleteItem"
							action="#{beanLink.deleteItem}" ajaxSingle="true"
							oncomplete="#{rich:component('mpDeleteItem')}.hide();"
							reRender="table" />
					</h:panelGroup>
					<h:panelGroup>
						<h:commandButton value="#{msg.cancelar}" id="cancelItem"
							onclick="#{rich:component('mpDeleteItem')}.hide();return false;" />
					</h:panelGroup>
				</h:panelGrid>
			</a4j:form>
		</rich:modalPanel>
		<!-- Fin Modal Panel Borrar -->
	</ui:define>
</ui:composition>
